<template>
	<!-- 定义一个查询容器组件 -->
	<MkQueryContainer class="listShenQing">
		<!-- 定义查询容器的头部模板 -->
		<template #header="">
			<div class="title">
				<MkButtonQuery @click="search" :loading="loading"></MkButtonQuery>
			</div>
			<!-- 定义一个表单组件，用于输入查询条件 -->
			<MkForm ref="queryForm" :model="searchParam">
				<!-- 定义一个输入框，用于输入申请单关键字，按下回车键触发搜索 -->
				<MkInput label="申请单" @keyup.enter.native="search" v-model="searchParam.danHao" clearable="" />
				<!-- 定义一个输入框，用于输入通用关键字，按下回车键触发搜索 -->
				<MkInput label="关键字" @keyup.enter.native="search" v-model="searchParam.keyword" clearable="" />
				<el-checkbox-group v-model="searchParam.riQiGuoLv" @change="search">
					<el-checkbox-button size="small" label="今天" :value="0" />
					<el-checkbox-button size="small" label="昨天" :value="-1" />
					<el-checkbox-button size="small" label="前天" :value="-2" />
				</el-checkbox-group>
				<el-checkbox-group v-model="searchParam.peiXueZhuangTai" @change="search" style="margin-top: 5px;">
					<el-checkbox-button label="未配血" value="未配血" @change="search" />
					<el-checkbox-button label="已配血" value="已配血" @change="search" />
				</el-checkbox-group>
			</MkForm>
		</template>
		<!-- 定义一个表格组件，用于展示查询结果 -->
		<MkTable :data="tableData" v-loading="loading" @row-dblclick="handleDoubleClick">
			<!-- 定义一个索引列 -->
			<MkColumnIndex width="45px" :fixed="false" />
			<MkColumn prop="id" label="单号" width="100" />
			<!-- 定义一个表格列，显示用血类型 -->
			<MkColumn prop="yongXueLeiXing" label="用血类型" width="100" />
			<!-- 定义一个表格列，显示姓名 -->
			<MkColumn prop="xingMing" label="姓名" width="50" />
			<!-- 定义一个表格列，显示病区 -->
			<MkColumn prop="bingQu" label="病区" />
			<!-- 定义一个表格列，显示申请品种 -->
			<MkColumnBasEntity entity="BasXueYePinZhong" prop="shenQingPinZhong" label="申请品种" />
			<!-- 定义一个表格列，显示单据状态 -->
			<MkColumn prop="danJuZhuangTai" label="单据状态" width="80" />
		</MkTable>
		<!-- 定义一个分页组件，用于分页查询结果 -->
		<MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :total="total"
			layout="total, sizes, prev, pager, next" @query="search" />
	</MkQueryContainer>
</template>

<script lang='ts' setup>
// 导入申请单相关的 API 和输出类型
import { TraShenQingApi, TraShenQingPageOutput, TraShenQingPeiFaXuePageInput } from '/@/api/tra/TraShenQing';
// 导入分页查询的自定义钩子
import { usePageQuery } from '/@/hooks/usePageQuery'
// 导入自定义工具函数
import { clog, showSuccess } from '/@/utils'
// 定义一个引用，用于操作抽屉组件
const drawerRef = ref();
// 定义组件的自定义事件
const emits = defineEmits(['load', "dblclick"])
// 使用分页查询钩子获取搜索参数、总数、表格数据、加载状态和搜索方法
const { searchParam, total, tableData, loading, search } = usePageQuery<TraShenQingPageOutput, TraShenQingPeiFaXuePageInput>(TraShenQingApi.peiFaXuePage)


// 定义表格行双击带出申请单
const handleDoubleClick = (row: TraShenQingPageOutput) => {
	emits('dblclick', row, true)
}

// 定义打开抽屉组件的方法
const open = async () => {
	// 显示抽屉组件
	drawerRef.value.show();
};

// 组件挂载后触发搜索
onMounted(() => {
	searchParam.riQiGuoLv = [0, -1, -2]
	search();
})

// 暴露 open 方法，供父组件调用
defineExpose({ open })

</script>

<style lang='scss' scoped>
.listShenQing {
	:deep(.el-card__body) {
		padding-top: 0;
	}
}

.title {
	font-size: 1.2rem;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 10px 0;
}

:deep(.el-pagination) {
	margin: 10px 0 10px 0 !important;
}
</style>